2022 年度新卒研修で「読みやすいコード」の研修を担当しました

クラスメソッドの 2022 年度新卒研修において、「読みやすいコード」という研修を実施しました。 ここで実施にあたって考えたことや資料など、すべての情報を共有します。

目的

保守性を大切さを理解し、保つための方法を習得する

達成水準

• 適切に命名できる
• 1 画面内 ( 20 行ていど ) に関連する処理が収まっている

研修構成

読みやすいコードとは何か？

項目	内容
実施形式	講義
目的	読みやすいコードを心がけるインセンティブが働く状態となる
達成水準	読みやすいコードとは何かがわかっている 読みやすいコードを書かなかった場合の弊害がわかっている 読みやすいコードを書くための要素がわかっている 読みやすいコードにたどり着く方法がわかっている

内容

読みにくいコードを読みやすくする

項目	内容
実施形式	モブプログラミング
目的	読みやすいコードはリファクタリングしないと実現できないことを実感する
達成水準	リファクタリングを実施できる

内容

1. ワークディレクトリーのセットアップ(10min)
   1. ワーク用リポジトリーの git clone
   2. 依存のインストール
2. モブプログラミング準備(30min)
   1. VSCode Live Share を使い、参加者すべてが同じコードベースで作業できるようにする
   2. ドライバーの担当順の決定
   3. 仕様を確認する
3. リファクタリング開始(6 * 15min)
   1. コードスメルを探す
   2. リファクタリングしてみる

発展課題

書籍リーダブルコードを読み、生じた疑問や質問について同期やエルダーと Slack 上で議論する

新卒メンバーからのフィードバック

良かった点

• モブプログラミングでリファクタリングを体験できたことは良かった
• リファクタリングを意義を理解できた
• Next.js に触れられた
• リファクタリングの観点と方法を知ることができた
• やっていることを言語化しながら共有する練習になった

伸びしろ

• モブプログラミングは React や TypeScript など必要な知識が多かった
• 6 人はモブプログラミングするには多いので 3 人ずつなどにわかれて実施したほうが良い
• 複数人でフォロー体制を作ると質問しやすくなる

やってみて

フィードバックのとおり前提事項が多く、本筋であるリファクタリングの実践を体験しづらい題材を提供してしまったと思いました。ここは来年度の課題です。

ただ、新卒メンバー同士のフォローと IDE によって、不慣れな方でも詰まることなく作業できていたこと、メンバー間の知識トランスファーが発生していたことから、モブプログラミングは研修にとても有効だったと感じています。

リファクタリングしがいのあるコードを作成するのは少し骨でした。変数や関数にわかりにくい名前をつけたり関数としてくくりだしたほうが良いコード片など、気づきやすいものは仕込めたのですが、構造を整理するようなものは意図的に入れ込むのが難しいです。

モブプログラミングを取り入れたのは後段のチーム開発研修を睨んでのことでした。選択肢として検討可能とするための布石です。

また、反転学習を取り入れ、書籍リーダブルコードを先に読んだ上で研修に望んでもらう形もあったかもしれません。その他の授業や全体設計も合わせ、突貫で準備したのでそこまで気が回らなかったのが実情ですので、来年度は検討したいと思います。